<selectedcontent>: The selected option display element

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

The <selectedcontent> HTML element can be used to display the content of the currently selected <option> inside a closed <select> element.

Attributes

The <selectedcontent> element includes the global attributes, but they will essentially be ignored because when used correctly as a child of a select button, the element is rendered inert.

The select button and all its content are inert by default so that if interactive children (for example, links or buttons) are included inside it, it will still be treated like a single button for interaction purposes.

No other attributes are defined on <selectedcontent>.

Description

When creating a Customizable select element, you can include the <selectedcontent> element inside a <button> element, which in turn needs to be the first child of the <select> element:

html

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>

  ...
</select>

<selectedcontent> contains a clone of a <select> element's currently-selected <option> element content, created using cloneNode() under the hood.

Any subsequent <select> content will be included in the drop-down picker.

Whenever the <select> element's selected <option> switches from one option to another, the <selectedcontent> element's content is removed and replaced by a new cloned copy of the DOM structure of the newly selected <option>, which is created using cloneNode(). Dynamic modifications to the selected <option> element's content made after the <select> element has been created are not automatically cloned to the <selectedcontent> element, and must be manually updated by the developer.

Warning: In particular, this may cause issues with sites that use popular front-end JavaScript frameworks where <option> elements are dynamically updated after creation, as these updates will not be cloned to the <selectedcontent> element.

Styling with CSS

It is useful to be able to target the currently-selected <option> element's content as it appears inside the select button with CSS styles, without affecting the styling of the content as it appears inside the picker.

For example, your <option> elements may contain icons, images, or even videos. This content might look nice inside the picker, but could cause the select button to increase in size, look untidy, and affect the surrounding layout.

This could be fixed by hiding the problem content when it is contained inside <selectedcontent>. For example:

css

selectedcontent img {
  display: none;
}

Note: If the <button> and/or <selectedcontent> elements are not included inside the <select> markup, the browser will place the selected option content inside the select button implicitly, but this targeting will not be possible.

Examples

You can see a full example that includes the <selectedcontent> element in our Customizable select elements guide.

Technical summary

Content categories	None
Permitted content	Mirrors content from the selected `<option>`.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	A `<button>` element that is the first child of a `<select>` element.
Implicit ARIA role	None
Permitted ARIA roles	None
DOM interface	`HTMLSelectedContentElement`

Specifications

Not currently part of a specification. See https://github.com/whatwg/html/pull/10633 for the relevant specification PR.